<!--
 @description 楼层内容
 @fileName FloorItem.vue
 @author zengqiongying
 @created 2022/12/26 11:18:27
-->
<template>
  <div
    class="floor-content"
    :class="{
      'three-cols':layoutType==='oneLineThree',
      'one-cols':['fullSmall','fullBig'].includes(layoutType)
    }"
  >
    <div v-for="(item,i) in list" :key="i" class="floor-item" @click="clickHandle(item)">
      <div class="item-con">
        <div class="image">
          <ImageVideo lazy-load :host="imgHost" :src="item.pic" fit="contain" />
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageVideo from '@/components/ImageVideo'
import CommonMixin from './CommonMixin'
export default {
  name: 'HomeFloorItem',
  components: {
    ImageVideo
  },
  mixins: [CommonMixin],
  data() {
    return {

    }
  },
  methods: {

  }
}

</script>
<style lang='less' scoped>
.floor-content{
  // margin-top: 20px;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  --width: calc(50vw - 16px - 6.5px);
  .floor-item{
    width:var(--width) ;
    margin-right: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
    &:nth-child(2n){
      margin-right: 0;
    }
    .item-con{
      background-color: #FFFFFF;
      box-shadow: 0px 0px 30px 0px rgba(60,73,88,0.04);
      border-radius: 9px;
      padding-bottom: 8px;
    }
    .image{
      width:var(--width);
      height: calc(var(--width) * 94 / 165);
      border-radius: 9px 9px 0 0;
      overflow: hidden;
    }
    .name{
      margin-top: 8px;
      padding: 0 10px;
      font-size: 12px;
      height: calc(12px * 1.5);
      line-height: 1.5;
      text-align: center;
      color: #292F51;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
  &.one-cols{
    .floor-item{
      width:100%;
      margin-right:0;
      margin-bottom: 0;
    .item-con{
      background: linear-gradient(90deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.18) 100%);
      box-shadow:none;
      border-radius: 8px;
    }
    .image{
      width:100%;
      height:auto;
      border-radius: 9px;
      overflow: hidden;
    }
    .name{
      display: none;
    }
    }
  }
  &.three-cols{
    padding: 0 0 0 12px;
    box-sizing: border-box;
    /* .floor-item{
      --width:calc((100vw - 12px) / 3);
      width: var(--width);
      padding-right: 12px;
      margin-right: 0;
      box-sizing: border-box;
      background: transparent;
      .item-con{
        width:100%;
        // max-width:109px !important;
        padding: 10px;
        box-sizing: border-box;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: left top;
        background-color: #FFFFFF;
        .image{
          // width: 89px;
          // height: 66px;
          --imgW:calc(((100vw - 12px) / 3) - 32px);
          width:var(--imgW) ;
          height: calc(var(--imgW) * 66 / 89);
          border-radius: 6px;
          overflow: hidden;
        }
        .name{
          text-align: left;
        }
      }
      &:first-child .item-con{
        background-image: url(~@/assets/home/bg1.png);
      }
      &:nth-child(2n) .item-con{
        background-image: url(~@/assets/home/bg2.png);
      }
      &:nth-child(3n) .item-con{
        background-image: url(~@/assets/home/bg3.png);
      }
    }*/
    .floor-item{
      --width:calc((100vw - 32px - 16px) / 3);
      width: var(--width);
      margin-right: 8px;
      &:nth-child(2n){
        margin-right: 8px;
      }
      &:nth-child(3n){
        margin-right: 0;
      }
      .item-con{
        .image{
          width:var(--width);
          height: calc(var(--imgW) * 100 / 109);
        }
      }
    }
  }
}
</style>
